<template>
  <div style='display: flex;flex-direction: column;width: 100%;'>
    <card-title text='成员信息' />
    <div style='display: flex;justify-content: flex-end;align-items: center;'>
      <span>起止时间：</span>
      <a-range-picker @change='onChange' />
      <a-button type='primary' @click='onSearch'>搜索</a-button>
    </div>
    <s-table
      ref='table'
      size='default'
      :rowKey='(record) => record.id'
      :columns='columns'
      :data='loadData'
      :showPagination='false'
    >
       <span slot='serial' slot-scope='text, record, index'>
          {{ index + 1 }}
        </span>
    </s-table>
  </div>
</template>

<script>
import CardTitle from '@/views/project/components/CardTitle.vue'
import { STable } from '@/components'
import { getMember } from '@/api/projectInitApply'

export default {
  name: 'memberInformation',
  components: { CardTitle, STable },
  data() {
    return {
      searchDate: [],
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          key: 'id',
          dataIndex: 'id'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          sorter: true
          // needTotal: true
        },
        {
          title: '年度',
          dataIndex: 'year'
        },
        {
          title: '工作职责',
          dataIndex: 'responsibilities'
        },
        {
          title: '投入人月',
          dataIndex: 'inputMonth'
        },
        {
          title: '加入时间',
          dataIndex: 'atime'
        },
        {
          title: '离开时间',
          dataIndex: 'etime'
        }
      ],
      id: '',
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getMember({
          projectApplicationId: this.$route.query.id
        }).then(res => {
          return {
            pageSize: parameter.pageSize,
            pageNo: parameter.pageNo,
            data: res.data.filter(obj => {
              if (this.searchDate.length < 2) {
                return true
              } else {
                let aTime = obj.atime ? new Date(obj.atime).getTime() : new Date().getTime()
                let eTime = obj.etime ? new Date(obj.etime).getTime() : new Date().getTime()
                let lTime = new Date(this.searchDate[0]).getTime()
                let rTime = new Date(this.searchDate[1]).getTime()
                return !(aTime < lTime || eTime > rTime)
              }
            })
          }
        })
      }
    }
  },
  mounted() {
    this.id = this.$route.query.id
  },
  methods: {
    onChange(date, dateString) {
      this.searchDate = dateString
    },
    onSearch() {
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped lang='less'>

</style>